<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404</title>
    <style>
        html,body{width: 100%;height:100%;margin:0;padding:0}
        body{
            width:100%;
            height:100%;
            background-color: #2b2a2a;
            background-image:url("http://520you.club/404.jpg") ;
            background-repeat: no-repeat;
            background-position: 50% 0;
            background-size: 100% 100%;           
            color:white;
        }
        a{color:white}
        h1{          
            font-size: 4em;
            margin: 0;
        }
        h3{
            font-size: 24px;
        }
        h4 a{
           font-size:33px;
           background-color: red;
           color:black;
           border:1px solid red;
        }
        h4{
            color:red;
            font-size: 28px;
            text-align: center;
        }
        #link,#link #href{            
            width: 100%;
            
        }
        #link #href div{
            float: left;
            text-align: center;
            font-size: 30px;
        }
        #link #href div.right a{
            display: block;
        }
        #link #href div.left{
            width: 28%;
            height:200px;
        }
        #link #href div.left a{
            width:100%;
            height:auto;
        }
        #link #href div.right{
            border-left: 1px solid white;
            width: 70%;
            height:auto;
        }
        #href .user{
            width:30%;
            height:80px;
            background-color:blue ;
        }
        .me::after{
            content: "hot!";
            position: absolute;
            color:red;
            font-size: 20px;
        }
        @media (max-width: 1180px) {
            body{
                background-size: 100% auto;
            }
            h1{
                text-align: center;
                font-size:11em;
            }
        }
    </style>
</head>
<body>
    <span>修复倒计时：<p id="time">10</p></span>
    <h1>404</h1>
    <h3>&nbsp;&nbsp;分手后，我还认识你，不过不想再见你，你过的好，我不会祝福你，你过的不好，我不会嘲笑你。因为我们从此陌生。你的世界不再有我，我的世界不再有你。我不能再珍惜你，抱歉，我失去的，也是你失去的……</h3>
    <hr/>
    <div id="link">  
        <h4>！！！即将返回<a style="cursor:pointer" onclick="to()">上一页</a>,或者访问：</h4>  
        <div id="href">
           <div class="left"><a class="me" href="http://520you.club">申振升的个人博客</a> </div>
           <div class="right">
               <a class="me" href="http://520you.club/flower">花之舞协会</a>
               <a href="http://w3cschool.com.cn">w3cschool</a>
               <a href="http://expressjs.jser.us/">express</a>
           </div>
        </div>    
    </div>
    <script>
        var ti=setInterval("time()",1000)
        var t=10
        function time(){
            t--;
            if(t<0){
               // clearInterval(ti);
                console.log("请你点击返回,此页面为404修复与导航页面" , t)
            }else{
                document.getElementById("time").innerHTML=t+"s";
            }
            
           
        }
        setTimeout("to()",t*1000)
        function to(){
           console.log( history.back())
           alert("即将返回上一页面")
        }
    </script>
</body>
</html>
